<template>
  <div class="hot-spot-ranking-list">
    <div class="ranking-list-item" v-for="(item,index) of fileData" :key="index">
      <div class="box">
        <div class="number">{{ index+1 }}</div>
        <div class="cover">
          <img :src=item.fileJPG />
        </div>
        <div class="info">
          <div class="info-top">
            <div id="name" @click="filePreview(item.fileId)">
              {{item.fileName}}
            </div>
            <div id="data">{{item.hotNum}}热度</div>
          </div>
          <div class="info-bottom">
            <div id="data">{{item.likeNum}}点赞 · {{item.collectionNum}}收藏 · {{item.downloadNum}}下载</div>
            <div id="user">
              <img :src=item.userJPG />
              <div id="user-name">{{item.userName}}</div>
              <!-- <div
                v-if="item.flag===1"
                class="button"
                id="followed"
                @click="isFollowed = !isFollowed"
              >
                已关注
              </div>
              <div
                v-else
                class="button"
                id="not-followed"
                @click="isFollowed = !isFollowed"
              >
                关注
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {gethotFile} from "@/api/home/home"
export default {
  data() {
    return {
      isFollowed: false,
      count: 15,
      userId:this.$store.getters.userId,
      fileData:[{
        fileId:1,
        fileName:'Python数据分析案例08——预测泰坦尼克号乘员的生存(机器学习全流程)',
        hotNum:555546,
        likeNum:555,
        collectionNum:23,
        downloadNum:100,
        flag:0,//0表示未关注，1表示已关注
        userName:'努力学习的小李',
        fileJPG:require('@/assets/image/common/test-cover.png'),
        userJPG:require('@/assets/image/common/test-avatar.png')
      }]
    };
  },
  methods: {
    //跳转详情页
    filePreview(fileId) {
      this.$router.push({
        path:'/docdetail',
        query: {
          id: fileId
        }
      })
    }
  },
  created() {
    let data = {
      userId: this.userId
    }
    gethotFile(data)
      .then((res)=>{
        // console.log(res);
        this.fileData=[];
        for (let i in res.data){
          // console.log(res.data[i]);
          this.fileData.push(res.data[i]);
        }
        for (let j in this.fileData) {
          this.fileData[j].fileJPG = 'data:image/png;base64,' + this.fileData[j].fileJPG;
          this.fileData[j].userJPG = 'data:image/png;base64,' + this.fileData[j].userJPG;
        }
        // console.log(this.fileData)
      }).catch((err)=>{
        console.log(err);
      })
  },
};
</script>

<style scoped>
.hot-spot-ranking-list {
  width: 960px;
  height: 1800px;
}
.ranking-list-item {
  box-sizing: border-box;
  padding: 20px 0;
  width: 960px;
  height: 120px;
  border-bottom: 2px solid #f0f0f2;
}
.box {
  vertical-align: top;
  display: flex;
  height: 100%;
  width: 100%;
}
.number {
  vertical-align: top;
  height: 16px;
  width: 32px;
  margin-right: 8px;
  text-align: center;
  font-size: 24px;
  color: #a3a4a6;
}
.cover {
  height: 100%;
  width: 144px;
}
.cover > img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.info {
  vertical-align: top;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 16px;
  height: 100%;
  width: 760px;
}
#name {
  font-size: 16px;
  font-weight: bold;
  max-width: 640px;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
}
.info-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: bottom;
}
.info-bottom > #data {
  line-height: 32px;
}
#data {
  font-size: 15px;
  color: #797979;
}
#user {
  display: flex;
  align-items: center;
}
#user > img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
#followed {
  background-color: #005a95;
  color: white !important;
}
#user > .button {
  cursor: pointer;
  font-size: 14px;
  color: #797979;
  width: 72px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 16px;
  border: 2px solid #f0f0f2;
}

#user-name {
  margin-left: 8px;
  margin-right: 16px;
  font-weight: 500;
}
</style>
